<template>
  <t-link theme="primary"  @click="handleOpen">
      充值
  </t-link>
  <t-dialog v-model:visible="visible" attach="body" header="充值" width="40%">
      <!-- 自定义表格 -->
    <custom-table
      ref="customTableRef"
      row-key="id"
      :columns="columns"
      :api="companyQuotaLogCRUD.page"
      column-controller-key="interactionList"
    >
      <template #topContent>
        <div style="margin-bottom: var(--td-comp-margin-xxl)">
          <!-- 充值 -->
          <t-button
           
            @click="handleOpenDialog('create', { contractFile:[], companyId:props.companyId, type:'1'})"
          >
            充值
          </t-button>

          
        </div>
       
      </template>

      <template #type="{ row }">
        {{list.find((item) => item.value == row.type)?.label}}
      </template>

      <template #createTime="{ row }">
        {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>

      
      <template #operation="{ row }">
        <t-space break-line>
           <t-link theme="primary" @click="handleOpenDialog('read', { id: row.id })"> 详情 </t-link>
           <t-link theme="primary" @click="handleOpenDialog('update', { id: row.id })" > 编辑 </t-link>
          <t-popconfirm content="确认删除该额度吗？" @confirm="handleDelete({ id: row.id })" >
            <t-link theme="danger"> 删除 </t-link>
          </t-popconfirm>
        </t-space>
      </template>
    </custom-table>

      
    <template #footer>
      <t-button theme="default" @click="visible = false">取消</t-button>
      <!-- <t-button :loading="loadingSubmit" @click="handleSelectedIds">保存</t-button> -->
    </template>
  </t-dialog>
   <!-- 自定义对话框 -->
    <custom-dialog
      ref="customDialogRef"
      v-slot="{ formData, readonly, mode }"
      :api-map="companyQuotaLogCRUD"
      header="*"
      width="35%"
      :on-before-save-data="handleDialogSaveData"
      :on-before-set-data="handleDialogSetData"
      @request-success="handleDialogRequestSuccess"
    >
 

      <t-form-item label="额度" name="quota" :rules="[{ required: true, message: '请输入额度' }]">
        <t-input-number style="width: 100%;" v-model:value="formData.quota" placeholder="请输入额度" clearable :readonly="readonly" />
      </t-form-item>
       <t-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
        <t-radio-group v-model:value="formData.type" clearable :readonly="readonly" placeholder="" :options="list">
        </t-radio-group>
      </t-form-item>

      <t-form-item label="合同文件" name="contractFile" >
        <upload v-model:files="formData.contractFile"     
          accept="image/*"
          theme="image" />
      </t-form-item>

      
    </custom-dialog>
 
</template>

<script setup lang="ts">
import dayjs from 'dayjs';

import { MessagePlugin, TableCol } from 'tdesign-vue-next';
import { PropType, ref, useTemplateRef, watch } from 'vue';
import { endEngineering, engineerinMessageCRUD, getEngineeringByOrderId } from '@/api/notice/engineering';
import { useDictionaryStore, useUserStore } from '@/store';
import CustomDialog from '@/components/custom/dialog/index.vue';
import CustomSearch from '@/components/custom/search/index.vue';
import CustomTable from '@/components/custom/table/index.vue';

import listToTree from '@/utils/listToTree';
import Upload from '@/components/upload/index.vue';
import { companyQuotaLogCRUD } from  '@/api/delivery/delivery'

// 用户仓库
const userStore = useUserStore();
const visible = ref(false);
// props
const props = defineProps({
  // 订单ids
  name: {
    type: String,
    required: true,
  },
  companyId: {
    type: Number,
    required: true,
  },
  
});

const list = [
  {label:'充值',value:'1'},
  // {label:'消耗',value:'2'},
  // {label:'返回',value:'3'},
  // {label:'退回',value:'4'},
]
// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'quota', title: '额度' },
  { colKey: 'type', title: '类型' },
 
  { colKey: 'createTime', title: '创建时间', width: 160 },
  { colKey: 'operation', title: '操作', width: 150, fixed: 'right' },
];

// 处理初始化表格
const handleInitTable = () => {

  const params = {
    companyId: props.companyId,
  };
  customTableRef.value.initTable(params);
};
// 处理对话框设置数据
const handleDialogSetData = (params: Record<string, any>) => {
 params.contractFile = JSON.parse(params.contractFile)
};
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
// 处理已解决
const handleDelete = (params: Record<string, any>) => {
  companyQuotaLogCRUD.delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};

// emits
const emits = defineEmits(['requestSuccess']);
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
   handleInitTable()
};
const handleOpen = () => {
  visible.value = true
  handleInitTable()
}
watch(visible, (newVal) => {
  if(newVal===false) {
    emits('requestSuccess',{mode:'update'});
  }
});
// 处理对话框保存数据
const handleDialogSaveData = (params: Record<string, any>) => {
  const hasWaitingFiles = params.contractFile.some((item: any) => item.status === 'waiting');
  if (hasWaitingFiles) {
    MessagePlugin.warning('有文件待上传，请点击上传文件');
    return false;
  }

  return params;
};
</script>
<style lang="less" scoped>
:deep(.t-radio-group .t-radio-button) {
  border: none;
  border-radius: 18px !important;
  margin-left: 11px;
}

:deep(.t-radio-group .t-radio-button.t-is-checked) {
  background-color: #f2f3f5;
}
</style>
